<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加车辆</title>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <style type="text/css">
        img {
            position: absolute;
            left: 180px;
            top: 80px;
        }
    </style>
    <script>
        $(function () {
            $("#submit-btn").click(function () {
                let $file = $("#file");    //C:\fakepath\M4 M.png
                let src = getObjectURL($file[0].files[0]);  //转化为DOM对象后，获取文件（jQuery无法进行操作）
                $("#image").attr("src", src);
                $.ajax({
                    url: "/management/vehicleIdentification",
                    data: new FormData($('#insertForm')[0]),    //转换为Dom对象
                    type: "POST",
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#modelName").attr("value", data.result[0].name);
                        $("#submit-btn").attr("class", "btn btn-success");  //设置按钮属性
                        let results = data.result;
                        $("#resultForm").html("");  //清空表格
                        for (const result of results) {
                            renderForm(result);
                        }
                    },
                    error: function () {
                        $("#submit-btn").attr("class", "btn btn-danger");
                    },
                    dataType: "json"
                });
            });
        });

        //显示表格
        function renderForm(result) {
            $("#resultForm").append(
                "        <tr>\n" +
                "            <td>" + result.name + "</td>\n" +
                "            <td>" + result.score + "</td>\n" +
                "            <td>" + result.year + "</td>\n" +
                "        </tr>"
            )
        }

        function getObjectURL(file) {   //获取上传图片的地址生成零时文件（名称为uuid）
            let url = null;
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL !== undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;

        }
    </script>
</head>
<body>
<!--导航栏-->
<div th:replace="~{commons/header::navbar(pageName='insertVehicle')}"></div>

<div class="col-md-4">
    <img id="image" src="/favicon.ico" alt="图片" class="img-responsive"
         style="width: 400px;height: auto;max-height: 280px;">
</div>
<!--填入数据-->
<form id="insertForm" class="col-md-4 col-md-offset-2" style="margin-top: 20px;" action="/management/insertVehicle"
      method="post"
      enctype="multipart/form-data">
    <!--车型-->
    <div class="form-group insertFrom">
        <label for="modelName">车辆名称</label>
        <input type="text" name="model_name" class="form-control" id="modelName" placeholder="型号">
    </div>
    <!--圈速-->
    <div class="form-group insertFrom">
        <label for="lapTime">圈速</label>
        <input type="text" name="lap_time_str" class="form-control" id="lapTime" placeholder="圈速成绩,请使用mm:ss.SSS格式，不然会炸">
    </div>
    <!--车辆介绍-->
    <div class="form-group insertFrom">
        <label for="introduction">车辆介绍</label>
        <input type="text" name="introduction" class="form-control" id="introduction" placeholder="车辆简介"
               style="height: 100px;">
    </div>

    <!--文件上传-->
    <div class="form-group insertFrom">
        <label for="file">上传图片</label>
        <input type="file" name="file" id="file">
    </div>
    <button id="submit-btn" class="btn btn-info" type="button">车辆检测</button>
    <button type="submit" class="btn btn-primary">添加</button>
</form>
<!--识别结果-->
<div class="col-md-4 col-md-offset-1">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>名称</th>
            <th>置信度</th>
            <th>年份</th>
        </tr>
        </thead>
        <tbody id="resultForm">
        <tr>
            <td>非车类</td>
            <td>
                1
            </td>
            <td>
                无年份信息
            </td>

        </tr>
        <tr>
            <td>非车类</td>
            <td>
                1
            </td>
            <td>
                无年份信息
            </td>

        </tr>
        <tr>
            <td>非车类</td>
            <td>
                1
            </td>
            <td>
                无年份信息
            </td>

        </tr>
        <tr>
            <td>非车类</td>
            <td>
                1
            </td>
            <td>
                无年份信息
            </td>

        </tr>
        <tr>
            <td>非车类</td>
            <td>
                1
            </td>
            <td>
                无年份信息
            </td>

        </tr>
        </tbody>
    </table>
</div>

</body>
</html>